<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="2022.1">
  <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
    p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px 'PingFang SC'}
    span.s1 {font: 12.0px 'PingFang SC'}
    span.s2 {font: 12.0px Helvetica}
  </style>
</head>
<body>
<p class="p1">&lt;!DOCTYPE html&gt;</p>
<p class="p1">&lt;html lang="zh-CN"&gt;</p>
<p class="p1">&lt;head&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;meta charset="UTF-8"&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;meta name="description" content="<span class="s1">销售沟通技巧答题系统，测试你的销售沟通能力</span>"&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;title&gt;<span class="s1">销售沟通技巧答题系统</span>&lt;/title&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"&gt;&lt;/script&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;style&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>* {</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin: 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>box-sizing: border-box;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>body {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);</p>
<p class="p1"><span class="Apple-converted-space">            </span>min-height: 100vh;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>justify-content: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #333;</p>
<p class="p1"><span class="Apple-converted-space">            </span>position: relative;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.container {</p>
<p class="p1"><span class="Apple-converted-space">            </span>width: 100%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>max-width: 900px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: white;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);</p>
<p class="p1"><span class="Apple-converted-space">            </span>overflow: hidden;</p>
<p class="p1"><span class="Apple-converted-space">            </span>position: relative;</p>
<p class="p1"><span class="Apple-converted-space">            </span>z-index: 10;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.header {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: linear-gradient(135deg, #2c3e50, #1a2a6c);</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: white;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 30px 40px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>text-align: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>position: relative;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.header h1 {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 2.5rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-bottom: 10px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-weight: 700;</p>
<p class="p1"><span class="Apple-converted-space">            </span>text-shadow: 0 2px 4px rgba(0,0,0,0.2);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.header p {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.2rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>opacity: 0.9;</p>
<p class="p1"><span class="Apple-converted-space">            </span>max-width: 700px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin: 0 auto;</p>
<p class="p1"><span class="Apple-converted-space">            </span>line-height: 1.6;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.progress-container {</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>justify-content: space-between;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-top: 25px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>position: relative;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.progress-bar {</p>
<p class="p1"><span class="Apple-converted-space">            </span>position: absolute;</p>
<p class="p1"><span class="Apple-converted-space">            </span>height: 6px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: rgba(255,255,255,0.2);</p>
<p class="p1"><span class="Apple-converted-space">            </span>top: 50%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>left: 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>right: 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transform: translateY(-50%);</p>
<p class="p1"><span class="Apple-converted-space">            </span>z-index: 1;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 3px;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.progress-fill {</p>
<p class="p1"><span class="Apple-converted-space">            </span>height: 100%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #4CAF50;</p>
<p class="p1"><span class="Apple-converted-space">            </span>width: 0%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 3px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transition: width 0.5s ease;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.progress-step {</p>
<p class="p1"><span class="Apple-converted-space">            </span>width: 36px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>height: 36px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 50%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #2c3e50;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border: 3px solid rgba(255,255,255,0.2);</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>justify-content: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-weight: bold;</p>
<p class="p1"><span class="Apple-converted-space">            </span>z-index: 2;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transition: all 0.3s ease;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.progress-step.active {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #4CAF50;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-color: #4CAF50;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transform: scale(1.1);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.progress-step.completed {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #4CAF50;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-color: #4CAF50;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.content {</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 30px 40px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: none;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.content.active {</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: block;</p>
<p class="p1"><span class="Apple-converted-space">            </span>animation: fadeIn 0.5s ease;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>@keyframes fadeIn {</p>
<p class="p1"><span class="Apple-converted-space">            </span>from { opacity: 0; transform: translateY(10px); }</p>
<p class="p1"><span class="Apple-converted-space">            </span>to { opacity: 1; transform: translateY(0); }</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.scene-title {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.8rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #2c3e50;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-bottom: 25px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding-bottom: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-bottom: 2px solid #eee;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: center;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.scene-title i {</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-right: 12px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #3498db;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #e3f2fd;</p>
<p class="p1"><span class="Apple-converted-space">            </span>width: 42px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>height: 42px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 50%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>justify-content: center;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.problem-box {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #f8f9fa;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 12px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-bottom: 30px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-left: 4px solid #3498db;</p>
<p class="p1"><span class="Apple-converted-space">            </span>box-shadow: 0 4px 10px rgba(0,0,0,0.05);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.dialogue {</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-bottom: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding-bottom: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-bottom: 1px dashed #e0e0e0;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.dialogue:last-child {</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-bottom: none;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-bottom: 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding-bottom: 0;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.dialogue .user {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-weight: bold;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #3498db;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.dialogue .client {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-weight: bold;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #e74c3c;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.question {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-weight: 600;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.1rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-top: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #2c3e50;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.options {</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: grid;</p>
<p class="p1"><span class="Apple-converted-space">            </span>grid-template-columns: 1fr;</p>
<p class="p1"><span class="Apple-converted-space">            </span>gap: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin: 25px 0;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.option {</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 18px 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 12px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: white;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border: 2px solid #e9ecef;</p>
<p class="p1"><span class="Apple-converted-space">            </span>cursor: pointer;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transition: all 0.2s ease;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: flex-start;</p>
<p class="p1"><span class="Apple-converted-space">            </span>position: relative;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.option:hover {</p>
<p class="p1"><span class="Apple-converted-space">            </span>transform: translateY(-3px);</p>
<p class="p1"><span class="Apple-converted-space">            </span>box-shadow: 0 5px 15px rgba(0,0,0,0.08);</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-color: #3498db;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.option.selected {</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-color: #3498db;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #e3f2fd;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.option.correct {</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-color: #2ecc71;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: rgba(46, 204, 113, 0.08);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.option.incorrect {</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-color: #e74c3c;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: rgba(231, 76, 60, 0.08);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.option-letter {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-weight: bold;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-right: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.2rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>min-width: 30px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>height: 30px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 50%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>justify-content: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #e9ecef;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #495057;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.option.selected .option-letter {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #3498db;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: white;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.option.correct .option-letter {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #2ecc71;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: white;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.option.incorrect .option-letter {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #e74c3c;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: white;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.explanation {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #f8f9fa;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 12px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 25px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-top: 25px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: none;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-left: 4px solid #9b59b6;</p>
<p class="p1"><span class="Apple-converted-space">            </span>box-shadow: 0 4px 15px rgba(0,0,0,0.05);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.explanation-title {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.4rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #9b59b6;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-bottom: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: center;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.explanation-title i {</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-right: 10px;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.analysis-grid {</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: grid;</p>
<p class="p1"><span class="Apple-converted-space">            </span>grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));</p>
<p class="p1"><span class="Apple-converted-space">            </span>gap: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-top: 20px;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.analysis-item {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: white;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 10px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>box-shadow: 0 4px 10px rgba(0,0,0,0.03);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.analysis-item h3 {</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #3498db;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-bottom: 12px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.1rem;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.formula {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 10px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin: 25px 0 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-left: 4px solid #2196f3;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.formula h3 {</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #1976d2;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-bottom: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: center;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.formula h3 i {</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-right: 10px;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.formula-content {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: white;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 8px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.1rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>line-height: 1.6;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.highlight {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: linear-gradient(120deg, rgba(255,255,0,0.3), rgba(255,255,0,0.3));</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 0 5px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 3px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-weight: 600;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.btn-container {</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>justify-content: space-between;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-top: 30px;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.btn {</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 14px 30px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.1rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 50px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>cursor: pointer;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border: none;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-weight: 600;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transition: all 0.3s ease;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>justify-content: center;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.btn i {</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-right: 8px;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.btn-prev {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #95a5a6;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: white;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.btn-prev:hover {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #7f8c8d;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transform: translateX(-3px);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.btn-next {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #3498db;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: white;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.btn-next:hover {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #2980b9;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transform: translateX(3px);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.btn-submit {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #2ecc71;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: white;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.btn-submit:hover {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #27ae60;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transform: translateY(-3px);</p>
<p class="p1"><span class="Apple-converted-space">            </span>box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.results-container {</p>
<p class="p1"><span class="Apple-converted-space">            </span>text-align: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 40px 30px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: none;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.results-container.active {</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: block;</p>
<p class="p1"><span class="Apple-converted-space">            </span>animation: scaleIn 0.5s ease;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>@keyframes scaleIn {</p>
<p class="p1"><span class="Apple-converted-space">            </span>from { opacity: 0; transform: scale(0.9); }</p>
<p class="p1"><span class="Apple-converted-space">            </span>to { opacity: 1; transform: scale(1); }</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.score-display {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 5rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-weight: 800;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #2c3e50;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin: 20px 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: linear-gradient(135deg, #3498db, #2ecc71);</p>
<p class="p1"><span class="Apple-converted-space">            </span>-webkit-background-clip: text;</p>
<p class="p1"><span class="Apple-converted-space">            </span>-webkit-text-fill-color: transparent;</p>
<p class="p1"><span class="Apple-converted-space">            </span>text-shadow: 0 2px 10px rgba(0,0,0,0.1);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.score-text {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.8rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-bottom: 30px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #2c3e50;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.restart-btn {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #e74c3c;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: white;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 15px 40px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.2rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 50px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>cursor: pointer;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border: none;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-weight: 600;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transition: all 0.3s ease;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-top: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: inline-flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: center;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.restart-btn:hover {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #c0392b;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transform: scale(1.05);</p>
<p class="p1"><span class="Apple-converted-space">            </span>box-shadow: 0 5px 20px rgba(231, 76, 60, 0.3);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.restart-btn i {</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-right: 10px;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.feedback {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #f8f9fa;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 25px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-top: 30px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>text-align: left;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.feedback-title {</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.4rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #9b59b6;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-bottom: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>text-align: center;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.share-container {</p>
<p class="p1"><span class="Apple-converted-space">            </span>text-align: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-top: 30px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #f0f8ff;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 15px;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.share-btn {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #3498db;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: white;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 15px 30px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 50px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.1rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border: none;</p>
<p class="p1"><span class="Apple-converted-space">            </span>cursor: pointer;</p>
<p class="p1"><span class="Apple-converted-space">            </span>display: inline-flex;</p>
<p class="p1"><span class="Apple-converted-space">            </span>align-items: center;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transition: all 0.3s;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin: 10px;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.share-btn:hover {</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: #2980b9;</p>
<p class="p1"><span class="Apple-converted-space">            </span>transform: translateY(-3px);</p>
<p class="p1"><span class="Apple-converted-space">            </span>box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.share-btn i {</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-right: 10px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1.3rem;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.wechat-tip {</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin-top: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>font-size: 1rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>color: #7f8c8d;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.qrcode-container {</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin: 25px 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>text-align: center;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.qrcode {</p>
<p class="p1"><span class="Apple-converted-space">            </span>width: 200px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>height: 200px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>margin: 0 auto;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: white;</p>
<p class="p1"><span class="Apple-converted-space">            </span>padding: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 10px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>box-shadow: 0 5px 15px rgba(0,0,0,0.1);</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>@media (max-width: 768px) {</p>
<p class="p1"><span class="Apple-converted-space">            </span>.header {</p>
<p class="p1"><span class="Apple-converted-space">                </span>padding: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>.header h1 {</p>
<p class="p1"><span class="Apple-converted-space">                </span>font-size: 2rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>.content {</p>
<p class="p1"><span class="Apple-converted-space">                </span>padding: 20px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>.analysis-grid {</p>
<p class="p1"><span class="Apple-converted-space">                </span>grid-template-columns: 1fr;</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>.btn-container {</p>
<p class="p1"><span class="Apple-converted-space">                </span>flex-direction: column;</p>
<p class="p1"><span class="Apple-converted-space">                </span>gap: 15px;</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>.btn {</p>
<p class="p1"><span class="Apple-converted-space">                </span>width: 100%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>.score-display {</p>
<p class="p1"><span class="Apple-converted-space">                </span>font-size: 4rem;</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.bg-animation {</p>
<p class="p1"><span class="Apple-converted-space">            </span>position: absolute;</p>
<p class="p1"><span class="Apple-converted-space">            </span>top: 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>left: 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>width: 100%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>height: 100%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>z-index: 1;</p>
<p class="p1"><span class="Apple-converted-space">            </span>overflow: hidden;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>.bubble {</p>
<p class="p1"><span class="Apple-converted-space">            </span>position: absolute;</p>
<p class="p1"><span class="Apple-converted-space">            </span>border-radius: 50%;</p>
<p class="p1"><span class="Apple-converted-space">            </span>background: rgba(255, 255, 255, 0.1);</p>
<p class="p1"><span class="Apple-converted-space">            </span>animation: float 15s infinite ease-in-out;</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>@keyframes float {</p>
<p class="p1"><span class="Apple-converted-space">            </span>0% { transform: translateY(0) translateX(0) rotate(0deg); }</p>
<p class="p1"><span class="Apple-converted-space">            </span>33% { transform: translateY(-20px) translateX(10px) rotate(10deg); }</p>
<p class="p1"><span class="Apple-converted-space">            </span>66% { transform: translateY(10px) translateX(-15px) rotate(-5deg); }</p>
<p class="p1"><span class="Apple-converted-space">            </span>100% { transform: translateY(0) translateX(0) rotate(0deg); }</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/style&gt;</p>
<p class="p1">&lt;/head&gt;</p>
<p class="p1">&lt;body&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;div class="bg-animation" id="bgAnimation"&gt;&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">    </span></p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;div class="container"&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;div class="header"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;h1&gt;<span class="s1">销售沟通技巧答题系统</span>&lt;/h1&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">            </span>&lt;p&gt;</span>掌握关键销售场景的沟通策略，提高成交转化率<span class="s2">&lt;/p&gt;</span></p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="progress-container"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="progress-bar"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="progress-fill" id="progress-fill"&gt;&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="progress-step active" id="step1"&gt;1&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="progress-step" id="step2"&gt;2&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="progress-step" id="step3"&gt;3&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- <span class="s1">场景</span>1 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;div class="content active" id="scene1"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;h2 class="scene-title"&gt;&lt;i class="fas fa-user-friends"&gt;&lt;/i&gt;<span class="s1">场景</span>1<span class="s1">：客户略带自嘲示弱</span>&lt;/h2&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="problem-box"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="dialogue"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="user"&gt;<span class="s1">你：宝你现在开始做小红书了吗？</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="client"&gt;<span class="s1">客户：还没有哦</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="dialogue"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="user"&gt;<span class="s1">你：咱们现在是自己的工作室不</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="client"&gt;<span class="s1">客户：</span>"<span class="s1">是的，一个小工作室，路边的十几个平方</span>"&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="question"&gt;<span class="s1">你该如何回应，能够促进用户成交？</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="options"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="A"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;A&lt;/div&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                    </span>&lt;div&gt;</span>那很棒啊，起码是自己当老板！未来客户多了还能换大店面！你现在来做小红书，那天就不远了！<span class="s2">&lt;/div&gt;</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="B"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;B&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div&gt;<span class="s1">那确实比较小哎，您目前客户情况怎么样？多吗？</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="C"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;C&lt;/div&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                    </span>&lt;div&gt;</span>十几个平方虽然不大，但我们的方案就是为小店定制的，您要不要了解一下？<span class="s2">&lt;/div&gt;</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="D"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;D&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div&gt;<span class="s1">好的，了解了。那我们有很多适合小工作室的方案，我给您介绍一下？</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="explanation" id="explanation1"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;h3 class="explanation-title"&gt;&lt;i class="fas fa-lightbulb"&gt;&lt;/i&gt;<span class="s1">解析</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;p&gt;&lt;strong&gt;<span class="s1">正确答案：</span>A&lt;/strong&gt;&lt;/p&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                </span>&lt;p&gt;</span>客户在<span class="s2">"</span>示弱<span class="s2">"</span>，其实是在测试你的态度。我们的核心目标是建立信任，而非确认事实。<span class="s2">&lt;/p&gt;</span></p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="analysis-grid"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="analysis-item"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h3&gt;<span class="s1">策略解析</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p&gt;<span class="s1">使用</span>"<span class="s1">价值重塑</span>"<span class="s1">三步法：</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>1. <span class="s1">肯定当下价值</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>2. <span class="s1">描绘未来潜力</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>3. <span class="s1">给出实现路径</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="analysis-item"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h3&gt;<span class="s1">错误分析</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p&gt;B<span class="s1">：附和打击（强化负面情绪）</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>C<span class="s1">：心急推销（跳过情感建立）</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>D<span class="s1">：无效流程（忽略言外之意）</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="formula"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3&gt;&lt;i class="fas fa-magic"&gt;&lt;/i&gt;<span class="s1">万能话术公式</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="formula-content"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>"&lt;span class="highlight"&gt;[<span class="s1">感叹词</span>]&lt;/span&gt;<span class="s1">！您说的</span> &lt;span class="highlight"&gt;[<span class="s1">限制</span>]&lt;/span&gt; <span class="s1">恰恰是</span> &lt;span class="highlight"&gt;[<span class="s1">优点</span>]&lt;/span&gt;<span class="s1">！只要现在开始</span> &lt;span class="highlight"&gt;[<span class="s1">做对一件事</span>]&lt;/span&gt;<span class="s1">，离</span> &lt;span class="highlight"&gt;[<span class="s1">美好未来</span>]&lt;/span&gt; <span class="s1">就不远了！</span>"</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="btn-container"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div&gt;&lt;/div&gt; &lt;!-- <span class="s1">占位空</span>div --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;button class="btn btn-next" id="next1"&gt;<span class="s1">下一题</span> &lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- <span class="s1">场景</span>2 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;div class="content" id="scene2"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;h2 class="scene-title"&gt;&lt;i class="fas fa-chart-line"&gt;&lt;/i&gt;<span class="s1">场景</span>2<span class="s1">：客户介绍业务优势</span>&lt;/h2&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="problem-box"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="dialogue"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="user"&gt;<span class="s1">你：那咱们的客单价定在多少呢？</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="client"&gt;<span class="s1">客户：目前做的是如花家的品牌，</span>300<span class="s1">多起价到</span>2000<span class="s1">。</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="question"&gt;<span class="s1">你的最佳回应是？</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="options"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="A"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;A&lt;/div&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                    </span>&lt;div&gt;</span>这个客单不错呀，你还是谦虚了，技术一般可收不了这么高。这个客单，流量上来之后，营收翻倍很明显呀！真是天选的小红书人啊！<span class="s2">&lt;/div&gt;</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="B"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;B&lt;/div&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                    </span>&lt;div&gt;</span>加盟是么？那其实你现在的客单价是可以的，低价的引流品也需要流量去支撑的。<span class="s2">&lt;/div&gt;</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="C"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;C&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div&gt;<span class="s1">好的，客单价</span>300<span class="s1">到</span>2000<span class="s1">。那我们有很多适合这个价位的推广方案，可以帮您吸引精准客户。</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="D"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;D&lt;/div&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                    </span>&lt;div&gt;</span>哇，客单价很高啊！我们正好有针对高客单价店铺的引流套餐，您要不要现在就了解一下？<span class="s2">&lt;/div&gt;</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="explanation" id="explanation2"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;h3 class="explanation-title"&gt;&lt;i class="fas fa-lightbulb"&gt;&lt;/i&gt;<span class="s1">解析</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;p&gt;&lt;strong&gt;<span class="s1">正确答案：</span>A&lt;/strong&gt;&lt;/p&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                </span>&lt;p&gt;</span>客户报出高客单价，这是一个<span class="s2">"</span>炫耀点<span class="s2">"</span>和<span class="s2">"</span>机会点<span class="s2">"</span>。我们的目标是深度赞美客户，放大其优势，并将其优势与我们的方案绑定。<span class="s2">&lt;/p&gt;</span></p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="analysis-grid"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="analysis-item"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h3&gt;<span class="s1">策略解析</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p&gt;<span class="s1">使用</span>"<span class="s1">优势放大</span>"<span class="s1">三步法：</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>1. <span class="s1">赞美能力，而非数字</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>2. <span class="s1">关联未来收益</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>3. <span class="s1">量化美好结果</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="analysis-item"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h3&gt;<span class="s1">错误分析</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p&gt;B<span class="s1">：敷衍评价</span>+<span class="s1">说教</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>C<span class="s1">：事实复述</span>+<span class="s1">无效流程</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>D<span class="s1">：心急推销（暴露销售意图）</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="formula"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3&gt;&lt;i class="fas fa-magic"&gt;&lt;/i&gt;<span class="s1">万能话术公式</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="formula-content"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>"<span class="s1">您这个</span> &lt;span class="highlight"&gt;[<span class="s1">客户的优势点</span>]&lt;/span&gt; <span class="s1">太棒了，这说明您在</span> &lt;span class="highlight"&gt;[<span class="s1">客户的核心能力</span>]&lt;/span&gt; <span class="s1">上肯定很强！基于这个基础，一旦</span> &lt;span class="highlight"&gt;[<span class="s1">我们的赋能动作</span>]&lt;/span&gt; <span class="s1">跟上，</span>&lt;span class="highlight"&gt;[<span class="s1">某个关键指标</span>]&lt;/span&gt; <span class="s1">想翻倍简直太轻松了！</span>"</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="btn-container"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;button class="btn btn-prev" id="prev2"&gt;&lt;i class="fas fa-arrow-left"&gt;&lt;/i&gt; <span class="s1">上一题</span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;button class="btn btn-next" id="next2"&gt;<span class="s1">下一题</span> &lt;i class="fas fa-arrow-right"&gt;&lt;/i&gt;&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- <span class="s1">场景</span>3 --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;div class="content" id="scene3"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;h2 class="scene-title"&gt;&lt;i class="fas fa-flag-checkered"&gt;&lt;/i&gt;<span class="s1">场景</span>3<span class="s1">：高信任客户最后犹豫</span>&lt;/h2&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="problem-box"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="dialogue"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="client"&gt;<span class="s1">客户：初学占现在可以报名的不</span>?&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="user"&gt;<span class="s1">你：可以的，</span>8<span class="s1">月开始，跟你空余时间对接</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="client"&gt;<span class="s1">客户：好的，费用可以分开一个月一个月的给么？</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="question"&gt;<span class="s1">你的最佳回应是？</span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="options"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="A"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;A&lt;/div&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                    </span>&lt;div&gt;</span>快一起给吧！你这个犹豫的性格，需要一个动力逼自己一把，才能让你不再错过！今年大运和你的个人运都适合搞事业，别再逆天而为了，全款是给你自己一个承诺，早日付诸行动！<span class="s2">&lt;/div&gt;</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="B"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;B&lt;/div&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                    </span>&lt;div&gt;</span>可以的，分期也没关系，只要您能开始学习，我们都支持的。您看是分几期比较方便呢？<span class="s2">&lt;/div&gt;</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="C"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;C&lt;/div&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                    </span>&lt;div&gt;</span>全款支付其实更划算，我们有一个小折扣。而且一次性付清后，您学习起来就没有后顾之忧了，可以更专注。<span class="s2">&lt;/div&gt;</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="option" data-value="D"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="option-letter"&gt;D&lt;/div&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                    </span>&lt;div&gt;</span>我理解您的顾虑，但我们的课程价值远超这个价格。很多学员全款后学习动力更足，很快就通过副业赚回来了，您要不要再考虑一下？<span class="s2">&lt;/div&gt;</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="explanation" id="explanation3"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;h3 class="explanation-title"&gt;&lt;i class="fas fa-lightbulb"&gt;&lt;/i&gt;<span class="s1">解析</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;p&gt;&lt;strong&gt;<span class="s1">正确答案：</span>A&lt;/strong&gt;&lt;/p&gt;</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">                </span>&lt;p&gt;</span>在客户信任度高但性格犹豫时，销售需要扮演<span class="s2">"</span>推手<span class="s2">"</span>角色，打破其固有的<span class="s2">"</span>犹豫<span class="s2">"</span>模式。<span class="s2">&lt;/p&gt;</span></p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="analysis-grid"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="analysis-item"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h3&gt;<span class="s1">策略解析</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p&gt;<span class="s1">使用</span>"<span class="s1">破局推动</span>"<span class="s1">四步法：</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>1. <span class="s1">点破痛点</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>2. <span class="s1">重塑意义</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>3. <span class="s1">赋予天命</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>4. <span class="s1">下达指令</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="analysis-item"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;h3&gt;<span class="s1">错误分析</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p&gt;B<span class="s1">：纵容弱点，失去良机</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>C<span class="s1">：理性说服，力度不足</span>&lt;br&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>D<span class="s1">：通用话术，缺乏共情</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="formula"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;h3&gt;&lt;i class="fas fa-magic"&gt;&lt;/i&gt;<span class="s1">万能话术公式</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="formula-content"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>"<span class="s1">我知道你一直在</span> &lt;span class="highlight"&gt;[<span class="s1">客户的长期痛点</span>]&lt;/span&gt; <span class="s1">上纠结，这次的</span> &lt;span class="highlight"&gt;[<span class="s1">付款</span>/<span class="s1">行动</span>]&lt;/span&gt; <span class="s1">正是帮你打破这个魔咒的最好机会！别再想了，现在就是</span> &lt;span class="highlight"&gt;[<span class="s1">一个不容错过的理由</span>]&lt;/span&gt;<span class="s1">，立刻</span> &lt;span class="highlight"&gt;[<span class="s1">下达行动指令</span>]&lt;/span&gt;<span class="s1">，为自己下一次决心！</span>"</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="btn-container"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;button class="btn btn-prev" id="prev3"&gt;&lt;i class="fas fa-arrow-left"&gt;&lt;/i&gt; <span class="s1">上一题</span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;button class="btn btn-submit" id="submit"&gt;<span class="s1">提交答案</span> &lt;i class="fas fa-paper-plane"&gt;&lt;/i&gt;&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;!-- <span class="s1">结果页面</span> --&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;div class="results-container" id="results"&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;h2 class="scene-title"&gt;&lt;i class="fas fa-trophy"&gt;&lt;/i&gt;<span class="s1">测试结果</span>&lt;/h2&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="score-display" id="score"&gt;0/3&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="score-text" id="score-text"&gt;<span class="s1">继续努力！</span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="feedback"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;h3 class="feedback-title"&gt;&lt;i class="fas fa-comments"&gt;&lt;/i&gt; <span class="s1">学习建议</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;p&gt;1. <span class="s1">客户示弱时，使用</span>"<span class="s1">价值重塑</span>"<span class="s1">技巧，将负面描述转化为正面价值</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;p&gt;2. <span class="s1">客户展示优势时，深入挖掘并放大其核心能力</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;p&gt;3. <span class="s1">高信任客户犹豫时，要强势推动，帮助其打破固有模式</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;p&gt;4. <span class="s1">销售沟通的核心是建立信任，而非急于推销产品</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;p&gt;5. <span class="s1">针对不同场景使用合适的话术公式，提高转化率</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;div class="share-container"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;h3&gt;&lt;i class="fas fa-share-alt"&gt;&lt;/i&gt; <span class="s1">分享给朋友</span>&lt;/h3&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;p&gt;<span class="s1">将答题系统分享给朋友，一起提升销售技巧！</span>&lt;/p&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;button class="share-btn" id="wechat-share"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;i class="fab fa-weixin"&gt;&lt;/i&gt; <span class="s1">分享到微信</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/button&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;button class="share-btn" id="copy-link"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;i class="fas fa-link"&gt;&lt;/i&gt; <span class="s1">复制链接</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/button&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="qrcode-container"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;div class="qrcode" id="qrcode"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;!-- <span class="s1">二维码将在这里生成</span> --&gt;</p>
<p class="p1"><span class="Apple-converted-space">                        </span>&lt;p&gt;<span class="s1">请使用微信扫描二维码</span>&lt;/p&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;div class="wechat-tip"&gt;</p>
<p class="p1"><span class="Apple-converted-space">                    </span>&lt;i class="fas fa-info-circle"&gt;&lt;/i&gt; <span class="s1">提示：在微信中点击右上角分享给好友或朋友圈</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;/div&gt;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>&lt;button class="restart-btn" id="restart"&gt;&lt;i class="fas fa-redo"&gt;&lt;/i&gt; <span class="s1">重新测试</span>&lt;/button&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>&lt;/div&gt;</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/div&gt;</p>
<p class="p2"><br></p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;script&gt;</p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">当前场景</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>let currentScene = 1;</p>
<p class="p1"><span class="Apple-converted-space">        </span>const totalScenes = 3;</p>
<p class="p1"><span class="Apple-converted-space">        </span>let score = 0;</p>
<p class="p1"><span class="Apple-converted-space">        </span>const correctAnswers = ['A', 'A', 'A'];</p>
<p class="p1"><span class="Apple-converted-space">        </span>const userAnswers = new Array(totalScenes).fill(null);</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">更新进度条</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>function updateProgress() {</p>
<p class="p1"><span class="Apple-converted-space">            </span>const progressFill = document.getElementById('progress-fill');</p>
<p class="p1"><span class="Apple-converted-space">            </span>const percentage = ((currentScene - 1) / totalScenes) * 100;</p>
<p class="p1"><span class="Apple-converted-space">            </span>progressFill.style.width = `${percentage}%`;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// <span class="s1">更新步骤状态</span></p>
<p class="p1"><span class="Apple-converted-space">            </span>for (let i = 1; i &lt;= totalScenes; i++) {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const step = document.getElementById(`step${i}`);</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (i &lt; currentScene) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>step.classList.add('completed');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>step.classList.remove('active');</p>
<p class="p1"><span class="Apple-converted-space">                </span>} else if (i === currentScene) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>step.classList.add('active');</p>
<p class="p1"><span class="Apple-converted-space">                    </span>step.classList.remove('completed');</p>
<p class="p1"><span class="Apple-converted-space">                </span>} else {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>step.classList.remove('active', 'completed');</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">显示场景</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>function showScene(sceneNumber) {</p>
<p class="p1"><span class="Apple-converted-space">            </span>document.querySelectorAll('.content').forEach(content =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>content.classList.remove('active');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p1"><span class="Apple-converted-space">            </span>document.getElementById(`scene${sceneNumber}`).classList.add('active');</p>
<p class="p1"><span class="Apple-converted-space">            </span>currentScene = sceneNumber;</p>
<p class="p1"><span class="Apple-converted-space">            </span>updateProgress();</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">选项选择事件</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>document.querySelectorAll('.option').forEach(option =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">            </span>option.addEventListener('click', function() {</p>
<p class="p1"><span class="Apple-converted-space">                </span>// <span class="s1">清除同组其他选项的选中状态</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>const parent = this.parentElement;</p>
<p class="p1"><span class="Apple-converted-space">                </span>parent.querySelectorAll('.option').forEach(opt =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>opt.classList.remove('selected');</p>
<p class="p1"><span class="Apple-converted-space">                </span>});</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// <span class="s1">选中当前选项</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>this.classList.add('selected');</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// <span class="s1">保存用户答案</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>const sceneNumber = parseInt(this.closest('.content').id.replace('scene', ''));</p>
<p class="p1"><span class="Apple-converted-space">                </span>userAnswers[sceneNumber - 1] = this.dataset.value;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// <span class="s1">显示解析</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>const explanation = document.getElementById(`explanation${sceneNumber}`);</p>
<p class="p1"><span class="Apple-converted-space">                </span>explanation.style.display = 'block';</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// <span class="s1">标记正确</span>/<span class="s1">错误</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>if (this.dataset.value === correctAnswers[sceneNumber - 1]) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>this.classList.add('correct');</p>
<p class="p1"><span class="Apple-converted-space">                </span>} else {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>this.classList.add('incorrect');</p>
<p class="p2"><span class="Apple-converted-space">                    </span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>// <span class="s1">同时显示正确答案</span></p>
<p class="p1"><span class="Apple-converted-space">                    </span>parent.querySelector(`.option[data-value="${correctAnswers[sceneNumber - 1]}"]`).classList.add('correct');</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p1"><span class="Apple-converted-space">        </span>});</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">导航按钮事件</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>document.getElementById('next1').addEventListener('click', () =&gt; showScene(2));</p>
<p class="p1"><span class="Apple-converted-space">        </span>document.getElementById('prev2').addEventListener('click', () =&gt; showScene(1));</p>
<p class="p1"><span class="Apple-converted-space">        </span>document.getElementById('next2').addEventListener('click', () =&gt; showScene(3));</p>
<p class="p1"><span class="Apple-converted-space">        </span>document.getElementById('prev3').addEventListener('click', () =&gt; showScene(2));</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">提交按钮事件</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>document.getElementById('submit').addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">            </span>// <span class="s1">计算得分</span></p>
<p class="p1"><span class="Apple-converted-space">            </span>score = 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>for (let i = 0; i &lt; totalScenes; i++) {</p>
<p class="p1"><span class="Apple-converted-space">                </span>if (userAnswers[i] === correctAnswers[i]) {</p>
<p class="p1"><span class="Apple-converted-space">                    </span>score++;</p>
<p class="p1"><span class="Apple-converted-space">                </span>}</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// <span class="s1">更新得分显示</span></p>
<p class="p1"><span class="Apple-converted-space">            </span>document.getElementById('score').textContent = `${score}/${totalScenes}`;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// <span class="s1">设置得分评语</span></p>
<p class="p1"><span class="Apple-converted-space">            </span>const scoreText = document.getElementById('score-text');</p>
<p class="p1"><span class="Apple-converted-space">            </span>if (score === totalScenes) {</p>
<p class="p1"><span class="Apple-converted-space">                </span>scoreText.textContent = '<span class="s1">太棒了！你是销售沟通专家！</span>';</p>
<p class="p1"><span class="Apple-converted-space">            </span>} else if (score &gt;= totalScenes/2) {</p>
<p class="p1"><span class="Apple-converted-space">                </span>scoreText.textContent = '<span class="s1">不错！继续提升销售技巧！</span>';</p>
<p class="p1"><span class="Apple-converted-space">            </span>} else {</p>
<p class="p1"><span class="Apple-converted-space">                </span>scoreText.textContent = '<span class="s1">继续努力，掌握更多销售技巧！</span>';</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// <span class="s1">显示结果页面</span></p>
<p class="p1"><span class="Apple-converted-space">            </span>document.getElementById('results').classList.add('active');</p>
<p class="p1"><span class="Apple-converted-space">        </span>});</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">重新测试按钮</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>document.getElementById('restart').addEventListener('click', () =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">            </span>// <span class="s1">重置所有状态</span></p>
<p class="p1"><span class="Apple-converted-space">            </span>currentScene = 1;</p>
<p class="p1"><span class="Apple-converted-space">            </span>score = 0;</p>
<p class="p1"><span class="Apple-converted-space">            </span>userAnswers.fill(null);</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// <span class="s1">清除所有选择</span></p>
<p class="p1"><span class="Apple-converted-space">            </span>document.querySelectorAll('.option').forEach(option =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>option.classList.remove('selected', 'correct', 'incorrect');</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// <span class="s1">隐藏所有解析</span></p>
<p class="p1"><span class="Apple-converted-space">            </span>document.querySelectorAll('.explanation').forEach(exp =&gt; {</p>
<p class="p1"><span class="Apple-converted-space">                </span>exp.style.display = 'none';</p>
<p class="p1"><span class="Apple-converted-space">            </span>});</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// <span class="s1">显示第一个场景</span></p>
<p class="p1"><span class="Apple-converted-space">            </span>showScene(1);</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>// <span class="s1">隐藏结果页面</span></p>
<p class="p1"><span class="Apple-converted-space">            </span>document.getElementById('results').classList.remove('active');</p>
<p class="p1"><span class="Apple-converted-space">        </span>});</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">初始化进度条</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>updateProgress();</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">微信分享功能</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>document.getElementById('wechat-share').addEventListener('click', function() {</p>
<p class="p3"><span class="s2"><span class="Apple-converted-space">            </span>alert('</span>在微信中，点击右上角菜单，选择<span class="s2">"</span>分享给朋友<span class="s2">"</span>或<span class="s2">"</span>分享到朋友圈<span class="s2">"');</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>});</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">复制链接功能</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>document.getElementById('copy-link').addEventListener('click', function() {</p>
<p class="p1"><span class="Apple-converted-space">            </span>const tempInput = document.createElement('input');</p>
<p class="p1"><span class="Apple-converted-space">            </span>tempInput.value = window.location.href;</p>
<p class="p1"><span class="Apple-converted-space">            </span>document.body.appendChild(tempInput);</p>
<p class="p1"><span class="Apple-converted-space">            </span>tempInput.select();</p>
<p class="p1"><span class="Apple-converted-space">            </span>document.execCommand('copy');</p>
<p class="p1"><span class="Apple-converted-space">            </span>document.body.removeChild(tempInput);</p>
<p class="p1"><span class="Apple-converted-space">            </span>alert('<span class="s1">链接已复制到剪贴板！</span>');</p>
<p class="p1"><span class="Apple-converted-space">        </span>});</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">创建动态背景</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>function createBubbles() {</p>
<p class="p1"><span class="Apple-converted-space">            </span>const bgAnimation = document.getElementById('bgAnimation');</p>
<p class="p1"><span class="Apple-converted-space">            </span>const bubblesCount = 20;</p>
<p class="p2"><span class="Apple-converted-space">            </span></p>
<p class="p1"><span class="Apple-converted-space">            </span>for (let i = 0; i &lt; bubblesCount; i++) {</p>
<p class="p1"><span class="Apple-converted-space">                </span>const bubble = document.createElement('div');</p>
<p class="p1"><span class="Apple-converted-space">                </span>bubble.classList.add('bubble');</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// <span class="s1">随机大小</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>const size = Math.random() * 100 + 50;</p>
<p class="p1"><span class="Apple-converted-space">                </span>bubble.style.width = `${size}px`;</p>
<p class="p1"><span class="Apple-converted-space">                </span>bubble.style.height = `${size}px`;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// <span class="s1">随机位置</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>bubble.style.left = `${Math.random() * 100}%`;</p>
<p class="p1"><span class="Apple-converted-space">                </span>bubble.style.top = `${Math.random() * 100}%`;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>// <span class="s1">随机动画延迟</span></p>
<p class="p1"><span class="Apple-converted-space">                </span>bubble.style.animationDelay = `${Math.random() * 5}s`;</p>
<p class="p1"><span class="Apple-converted-space">                </span>bubble.style.animationDuration = `${10 + Math.random() * 20}s`;</p>
<p class="p2"><span class="Apple-converted-space">                </span></p>
<p class="p1"><span class="Apple-converted-space">                </span>bgAnimation.appendChild(bubble);</p>
<p class="p1"><span class="Apple-converted-space">            </span>}</p>
<p class="p1"><span class="Apple-converted-space">        </span>}</p>
<p class="p2"><span class="Apple-converted-space">        </span></p>
<p class="p1"><span class="Apple-converted-space">        </span>// <span class="s1">初始化</span></p>
<p class="p1"><span class="Apple-converted-space">        </span>document.addEventListener('DOMContentLoaded', function() {</p>
<p class="p1"><span class="Apple-converted-space">            </span>createBubbles();</p>
<p class="p1"><span class="Apple-converted-space">        </span>});</p>
<p class="p1"><span class="Apple-converted-space">    </span>&lt;/script&gt;</p>
<p class="p1">&lt;/body&gt;</p>
<p class="p1">&lt;/html&gt;</p>
</body>
</html>
